import React from 'react';
import { useModel } from 'umi';

/**
 * 权限控制组件
 * 用于根据用户权限动态显示或隐藏UI元素
 * @param {string} permission - 权限标识符
 * @param {React.ReactNode} children - 子元素
 * @param {React.ReactNode} noMatch - 无权限时显示的内容
 */
const Authorized = ({ permission, children, noMatch = null }) => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  
  // 如果没有指定权限要求，则直接显示子元素
  if (!permission) {
    return <>{children}</>;
  }
  
  // 如果用户未登录，则显示无权限内容
  if (!currentUser) {
    return <>{noMatch}</>;
  }
  
  // 检查用户是否拥有指定权限
  const hasPermission = currentUser.permissions?.some(
    (item) => item.identifier === permission && item.type === 'button'
  );
  
  return <>{hasPermission ? children : noMatch}</>;
};

export default Authorized;